<template>
	<view class="setting-nickname-wrapper ">
		<view class="conteainer-public-style mg24 flex-c-s">
			<input type="password" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="paymentPassword" placeholder="请输入支付密码" /> 
			<!-- <uni-icons type="closeempty" size="14" color="#999"></uni-icons> -->
		</view>
		<view class="conteainer-public-style mg24 flex-c-s">
			<input type="password" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="confirmPaymentPassword" placeholder="请输入确认支付密码" /> 
			<!-- <uni-icons type="closeempty" size="14" color="#999"></uni-icons> -->
		</view>
		<!-- <view class="conteainer-public-style mg24 flex-c-s">
			<input type="number" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="phone" placeholder="请输入手机号" /> 
			<uni-icons type="closeempty" size="14" color="#999"></uni-icons>
		</view> -->
		
		<view class="conteainer-public-style mg24 flex-c-s">
			<view class="flex-c">
				<input type="text" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="verificationCode" placeholder="请输入验证码" />
				<!-- <uni-icons type="closeempty" size="14" color="#999"></uni-icons> -->
			</view>
			<text class="fz26 color-theme" @click="getTestCode">{{ codeTxt }}</text>
		</view>
		
		<button class="public-large-btn b-r16" @click="setPwd">保 存</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { getCodePaymentPassword,updatePaymentPassword } from '@/http/my'
import { updateUserLoginInfo } from '@/utils/tools'

export default defineComponent({
	setup() {
		const phone = ref('')
		const timer = ref()
		const state = reactive({
			second: 60,
			codeTxt: '获取验证码',
			phone: '',
			verificationCode: '',
			paymentPassword: '',
			confirmPaymentPassword: '',
		})
		
		const getTestCode = async () => { // 15502992957
			// let res = await getCodePaymentPassword();
			// console.log(res);
			if(!state.paymentPassword || !state.confirmPaymentPassword || state.paymentPassword !== state.confirmPaymentPassword) {
				uni.showToast({ icon: 'none', title: '输入支付密码' })
				return
			} 
			
			if(state.codeTxt !== '获取验证码') return;
			try{
				let res = await getCodePaymentPassword(); 
				console.log(res);
				if(res.code === 0 ) {
					uni.showToast({
						icon: 'none',
						title: '验证码已发送至绑定的该手机号'
					})
					timer.value = setInterval(() => {
						if(state.second <= 0) {
							clearInterval(timer.value)
							state.second = 60
							state.codeTxt = '获取验证码'
							return
						}
						state.second --
						state.codeTxt = `${state.second}后重新发送` 
					}, 1000) 
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}  
			}catch(e){ 
				uni.showToast({
					icon: 'fail',
					title: '网络错误'
				})
			} 
		}
		
		const setPwd = async () => {
			if(!state.paymentPassword) {
				uni.showToast({ icon: 'none', title: '输入支付密码' })
				return
			}
			if(!state.confirmPaymentPassword) {
				uni.showToast({ icon: 'none', title: '输入确定支付密码' })
				return
			}
			
			if(state.paymentPassword !== state.confirmPaymentPassword) {
				uni.showToast({ icon: 'none', title: '两次支付密码不一致' })
				return
			}
			
			if(!state.verificationCode) {
				uni.showToast({ icon: 'none', title: '输入短信验证码' })
				return
			}
			
			let res = await updatePaymentPassword({
				"confirmPaymentPassword": state.confirmPaymentPassword,
				"paymentPassword": state.paymentPassword,
				"verificationCode": state.verificationCode
			})
			console.log(res);
			if(res.code === 0 ) {
				
				updateUserLoginInfo(() => {
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
				})
			} else {
				uni.showToast({ icon: 'none', title: res.msg || '修改失败' })
			}
		}
		
		return {
			getTestCode,
			phone,
			setPwd,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.setting-nickname-wrapper{
	.b-r16{
		margin-top: 40rpx;
		border-radius: 16rpx;
	}
}
</style>